<template>
	<view>
		<view class="container">
			<view class="tui-searchbox" @tap="search">
				<view class="tui-search-input">
					<text class="tui-search-text">{{$s.config.getConfig('PleaseEnterTheName')}}</text>
				</view>
			</view>
			<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop" :style="{height:height+'px',top:top+'px'}">
				<view v-for="(item,index) in category_one_list" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']"
				 :data-current="index" @tap.stop="swichNav">
					<text>{{item.title}}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y class="right-box" :style="{height:height+'px',top:top+'px'}">
				<!--内容部分 start 自定义可删除-->
				<view class="page-view">
					<view indicator-dots autoplay circular :interval="5000" :duration="150" class="swiper">
							<image :src="category_one_list[currentTab].image_url" class="slide-image" />
					</view>
					<view class="class-box">
						<view class="class-item">
							<view class="g-container">
								<view class="g-box" v-for="(item,index) in category_tow_list" :key="index" :data-index="index" @tap="product_list">
									<image :src="item.image_url" class="g-image" />
									<view class="g-title">{{item.title}}</view>
								</view>
							</view>
							
						</view>
						
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
		
</template>

<script>
	export default {
		data() {
			return {
				category_one_list:[],//一级分类
				category_tow_list:[],//二级分裂
				height: 0, //scroll-view高度
				top: 0,
				currentTab: 0, //预设当前项的值
				scrollTop: 0 //tab标题的滚动条位置
			}
		},
		onLoad: function(options) {
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						let header = 92;
						let top = 0;
						//#ifdef H5
						top = 44;
						//#endif
						this.height = res.windowHeight - uni.upx2px(header)
						this.top = top + uni.upx2px(header)
					}
				});
			}, 50)
			this._onLoad();
		},
		methods: {
			//默认方法
			async _onLoad(){
				this.category_one_list  = await this.$s.model.category.getCategoryOneList()
				await this.getCategoryTowList()
				await this.$s.model.cart.getCartSum()
			},
			async getCategoryTowList(){
				this.category_tow_list = await this.$s.model.category.getCategoryTowList({
					pid:this.category_one_list[this.currentTab].id
				})
			},
			// 点击标题切换当前页时改变样式
			async swichNav(e) {
				let cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur;
					this.checkCor();
					await this.getCategoryTowList()
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor: function() {
				let that = this;
				//这里计算按照实际情况进行修改，动态数据要进行动态分析
				//思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算
				//数据很多可以多次if判断然后进行滚动距离计算即可
				if (that.currentTab > 7) {
					that.scrollTop = 500
				} else {
					that.scrollTop = 0
				}
			},
			async product_list(e){
				const index = this.$s.api.getDataSet(e,'index')
				const product_type_id = this.category_tow_list[index].id
				return await this.$s.uniApi.navigateTo({url:'../product_list/product_list?product_type_id='+product_type_id});
			},
			// 跳转搜索页
			async search(){
				return await this.$s.uniApi.navigateTo({url:'../search/search'});
			}
		},
		//下拉刷新
		async onPullDownRefresh() {
			await this._onLoad()
			uni.stopPullDownRefresh()
		},
	}
</script>

<style lang="scss" scoped>
@import 'category.scss';
</style>
